<template>
  <ele-modal
    form
    :width="1400"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        highlight-current-row
        v-model:selections="selections"
        border
        stripe
      >
        <!-- <template #toolbar>
          <el-button
            type="success"
            class="ele-btn-icon"
            :icon="Plus"
            @click="openEdit()"
          >
            添加保单
          </el-button>
        </template> -->
        <template #status="{ row }">
          <el-tag :type="row.statusTag">{{ row.statusText }}</el-tag>
        </template>
        <template #pdf="{ row }">
          <span @click="openPdf(row.pdf)" class="blue pointer">查看</span>
        </template>
        <template #action="{ row }">
          <el-button
            v-if="row.canRefund == 1"
            type="danger"
            @click="openRefound(row)"
            size="small"
          >
            退保
          </el-button>
        </template>
      </ele-pro-table>
    </ele-card>
    <update-insurance v-model="showEdit" :data="props.data" @done="reload" />
    <!-- 退保 -->
    <Refund v-model="showRefound" :data="current" @done="reload" />
  </ele-modal>
</template>

<script setup>
  import { ref, watch, computed } from 'vue';

  import UpdateInsurance from './update-insurance.vue';
  import Refund from '@/views/insurance/refund/components/create.vue';

  import { pageInsurance } from '@/api/company';
  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    data: Object,
    cate: String
  });
  const title = ref('');

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [];

    cols.push(
      {
        width: 120,
        prop: 'cate',
        label: '类型'
      },
      {
        width: 100,
        slot: 'status',
        label: '状态'
      },
      {
        prop: 'insurance',
        label: '保险公司'
      },
      {
        width: 100,
        prop: 'insurance_salesman',
        label: '业务员'
      },
      {
        width: 80,
        prop: 'rebate',
        label: '返点'
      },
      {
        width: 100,
        prop: 'price',
        label: '价格'
      },
      {
        width: 200,
        prop: 'sTime',
        label: '开始日期'
      },
      {
        width: 200,
        prop: 'eTime',
        label: '结束日期'
      },
      {
        width: 90,
        slot: 'pdf',
        label: '电子保单',
        align: 'center'
      },
      {
        width: 90,
        slot: 'action',
        label: '操作',
        align: 'center'
      }
    );

    return cols;
  });

  /** 表格选中数据 */
  const selections = ref([]);
  const current = ref([]);

  /** 表格数据源 */
  var offerList = ref({});
  const datasource = async ({ page, limit, where, orders }) => {
    const result = await pageInsurance({
      ...where,
      ...orders,
      page,
      limit,
      vehicle_id: props.data.id
    });
    offerList.value = result.list;
    return result;
  };

  /** 搜索 */
  const reload = (where) => {
    selections.value = [];
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 退保 */
  const showRefound = ref(false);
  const openRefound = (row) => {
    current.value = row;
    showRefound.value = true;
  };

  const openPdf = (url) => {
    window.open(url);
  };

  /** 上传保单 */
  const showEdit = ref(false);
  const openEdit = () => {
    showEdit.value = true;
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = props.data.plate_number + '的保险列表';
      } else {
        console.log('关闭');
      }
    }
  );
</script>
